import React, { Component } from 'react';
import Editor from '@/utils/Editor';
import { Form, Icon, Select, Button } from 'antd';
import { connect } from "dva/index";
import { message } from "antd/lib/index";
import UserSession from '@/UserSession';
import { knowledgeDialogSlots, knowledgeDialogActionNodeInfo } from "@/services/dialog";
const formItemLayout = {
  labelCol: { span: 1 },
  wrapperCol: { span: 20 },
};

@connect(({ dialogCommon, loading }) => ({
  dialogCommon,
  loading: loading.models.data,
}))
class ActionClear extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      currentSlots: [],
      slots: [],
      dialogId: props.dialogId,
      nodeId: props.nodeId,
      stage: props.stage,
      stageId: "",
    };
  }
  componentDidMount() {
    this.getInit();
    this.getDialogSlots();
  };

  getInit = async () => {
    const { nodeId, dialogId, stage } = this.state;
    const { dispatch } = this.props;
    if (UserSession.isSystemKnowledge()) {
      let res = await knowledgeDialogActionNodeInfo({ dialogId, nodeId });
      console.log(res);
      this.setState({
        stageId: res.id,
        currentSlots: res.clear == null ? [] : res.clear.clearSlots
      })
    } else {
      dispatch({
        type: 'dialogCommon/getActionData',
        payload: {
          dialogId: dialogId,
          nodeId: nodeId,
          urlPrefix: UserSession.isSystemKnowledge() ? 1 : null,
        },
        callback: (res) => {
          console.log(res);
          this.setState({
            stageId: res.id,
            currentSlots: res.clear == null ? [] : res.clear.clearSlots
          })
        }
      });
    }
  };

  getDialogSlots = async () => {
    const { dialogId } = this.state;
    const { dispatch } = this.props;
    if (UserSession.isSystemKnowledge()) {
      let res = await knowledgeDialogSlots({ dialogId })
      this.setState({
        slots: res == null ? [] : res,
      })
    } else {
      dispatch({
        type: 'dialogCommon/getDialogSlots',
        payload: {
          dialogId: dialogId,
          urlPrefix: UserSession.isSystemKnowledge() ? 1 : null,
        },
        callback: (res) => {
          this.setState({
            slots: res == null ? [] : res,
          })
        }
      });
    }
  };

  changeSlotValue = (val, index) => {
    const { currentSlots } = this.state;
    currentSlots[index] = val;
    this.setState({
      currentSlots
    });
  };

  addClearSlots = () => {
    const { currentSlots } = this.state;
    currentSlots.push("");
    this.setState({
      currentSlots,
    })
  };

  closeSlot = (index) => {
    const { currentSlots } = this.state
    currentSlots.splice(index, 1)
    this.setState({
      currentSlots,
    })
  };

  save = () => {
    const { currentSlots, stageId, stage, nodeId, dialogId } = this.state;
    const { dispatch } = this.props;
    dispatch({
      type: 'dialogCommon/saveStage',
      payload: {
        id: stageId ? stageId : dialogId + '-' + nodeId,
        field: "clear",
        clear: {
          clearSlots: currentSlots,
          retryClearSlots: true,
          setTime: new Date().getTime()
        },
        stage
      },
      callback: (res) => {
        message.info(res.msg);
        this.props.closeDrawer();
      }
    });
  };

  forMap = (itemId, index) => {
    const { slots } = this.state;
    const OptionElem = slots.map(this.forMapSlotsOption);
    return (
      <span>
        <Select
          size='small' value={itemId} defaultValue='none' style={{ width: 120, marginLeft: 15 }} onChange={(value) => this.changeSlotValue(value, index)}>
          <Select.Option value='none'>请选择词槽</Select.Option>
          {OptionElem}
        </Select>
        <Icon type="close-circle" onClick={() => this.closeSlot(index)} style={{ marginLeft: 5, cursor: 'pointer' }} />
      </span>
    );
  };

  forMapSlotsOption = option => {
    return (
      <Select.Option value={option.id}>{option.name}</Select.Option>
    )
  };

  render() {
    const { tag } = this.props;
    const tagChild = this.state.currentSlots.map((itemId, index) => this.forMap(itemId, index));
    return (
      <div style={{ margin: '15px 0px', paddingLeft: '30px' }}>

        <Form.Item {...formItemLayout} label="">
          <div style={{ display: 'inline-block', width: '100%' }}>
            清空词槽&nbsp;&nbsp;
            {tagChild}
            <Button htmlType='button' type="primary" size='small' onClick={this.addClearSlots} style={{ marginLeft: 15 }} >添加词槽</Button>
          </div>
        </Form.Item>

        <div
          style={{
            position: 'absolute',
            right: 0,
            bottom: 0,
            width: '100%',
            borderTop: '1px solid #e9e9e9',
            padding: '10px 16px',
            background: '#fff',
            textAlign: 'right',
          }}
        >
          <Button onClick={this.props.closeDrawer} style={{ marginRight: 8 }}>
            取消
          </Button>
          <Button onClick={this.save} disabled={UserSession.isSystemKnowledge()} type="primary">
            确定
          </Button>
        </div>
      </div>
    )
  }
}

export default ActionClear;
